<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="manifest" href="/static/site.webmanifest">

  <link rel=stylesheet type=text/css href="/static/css/shared.css">
  <link rel=stylesheet type=text/css href="/static/css/slider.css">
  <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/vendor/fontawesome/css/all.css">
  <link href="/static/vendor/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/vendor/dropzone/css/basic.min.css" />
  <link rel="stylesheet" href="/static/vendor/dropzone/css/dropzone.min.css" />
  <link rel="stylesheet" href="/static/vendor/easymde/css/easymde.min.css">
  <link rel=stylesheet type=text/css href="/static/css/Defaultv2/Defaultv2.css">
  <script src="/static/vendor/socketio/js/socket.io.js"></script>
  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
  <script src="/static/vendor/lazyload/js/lazyload.min.js"></script>
  <script src="/static/vendor/easymde/js/easymde.min.js"></script>

  {% block head %}

  {% endblock %}

</head>

<body>

  <div class="main-navbar">
    <nav class="navbar  navbar-expand-lg navbar-light bg-white">
      <a class="navbar-brand" href="/">
        <img src="{{sysSettings.systemLogo}}" width="48" height="48" class="d-inline-block align-top" alt="">
        <span class="navbar-title"><b>{{sysSettings.siteName}}</b></span>
      </a>
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto" id="main-navbar-options">
          <form class="form-inline my-2 my-lg-0 mr-auto" action="/search" method="post">
            <input class="form-control search" name="term" type="search" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" aria-label="Search" size="24">
          </form>
          <li class="nav-item px-2">
            <a class="nav-link zoom" href="/channels"><b><i class="fas fa-tv"></i> Channels</b></a>
          </li>
          <li class="nav-item px-2">
            <a class="nav-link zoom" href="/topics"><b><i class="fas fa-hashtag"></i> Topics</b></a>
          </li>
          <li class="nav-item px-2">
            <a class="nav-link zoom" href="/streamers"><b><i class="fas fa-users"></i> Streamers</b></a>
          </li>
          {% if user.is_authenticated == False %}
          <li class="nav-item px-2">
            <a class="nav-link zoom" href="/login"><i class="fas fa-sign-in-alt"></i> Login</a>
          </li>
          {% if allowRegistration == True %}
          <li class="nav-item px-2">
            <a class="nav-link zoom" href="/register"><i class="far fa-id-card"></i> Register</a>
          </li>
          {% endif %}
          {% else %}
          <li class="nav-item px-2 d-block d-lg-none">
            <a class="nav-link zoom" href="/notifications"><i class="fas fa-bell"></i> Notifications {% if notifications|count > 0 %}<span id="notificationCountMobile" class="badge badge-danger">{{notifications|count}}</span>{% endif %}</a>
          </li>
          <li class="nav-item dropdown pl-2 pr-1 d-none d-lg-block">
            <a class="nav-link zoom" href="#" id="navbarDropdownNotificationLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <b><i class="fas fa-bell"></i></b> {% if notifications|count > 0 %}<span class="badge badge-danger" id="notificationCountNav">{{notifications|count}}</span>{% endif %}
            </a>
            <ul class="dropdown-menu notificationDropdownMenu shadow">
                <li class="head text-light bg-dark">
                  <div class="row">
                    <div class="col-lg-12 col-sm-12 col-12">
                      <span>Notifications <span class="badge badge-light" id="notificationCountMenu">{{notifications|count}}</span></span>
                      <a href="javascript:void(0);" class="float-right text-light" onclick="clearAllNotifications(); return false;">Mark all as read</a>
                    </div>
                  </div>
                </li>
                <div class="notificationBody">
                    {% if notifications != [] %}
                      {% for entry in notifications %}
                      <li class="notification-box" id="notification-{{entry.notificationID}}">
                        <div class="row">
                          <div class="col-lg-1 col-sm-1 col-1">
                            <img width="35" height="35" class="userPhoto rounded notificationImg" src="{{entry.image}}" onerror="this.src='/static/img/user2.png';">
                          </div>
                          <div class="col-lg-11 col-sm-11 col-11">
                            <span class="float-right"><a href="javascript:void(0);" onclick="clearNotification('{{entry.notificationID}}'); return false;"><i class="fas fa-times"></i></a></span>
                            <a href="{{entry.link}}"><div>{{entry.message}}</div></a>
                            <small class="text-primary">{{entry.timestamp|normalize_date}}</small>
                          </div>
                        </div>
                      </li>
                      {% endfor %}
                    {% endif %}
                    <li class="notification-box" id="notification-empty" {% if notifications != [] %} style="display:none;" {% endif %}>
                    <div class="row">
                      <div class="col-lg-12 col-sm-12 col-12">
                        <div>No New Notifications</div>
                      </div>
                    </div>
                    </li>
                </div>

                <li class="footer bg-dark text-center">
                  <a href="/notifications" class="text-light">View All</a>
                </li>
            </ul>
          </li>
          <li class="nav-item dropdown px-2">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img width="30" height="30" class="userPhoto rounded" src="/images/{{current_user.pictureLocation}}" onerror="this.src='/static/img/user2.png';"> {{current_user.username}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              {% if user.has_role('Admin') %}
              <a class="dropdown-item" href="/settings/admin"><i class="fas fa-server"></i> Admin</a>
              {% endif %}
              {% if user.has_role('Streamer') %}
              <a class="dropdown-item" href="/settings/channels"><i class="fas fa-video"></i> My Channels</a>
              {% if sysSettings.allowUploads == True %}
              <a class="dropdown-item" href="#" data-toggle="modal" data-target="#uploadModal"><i class="fas fa-upload"></i> Upload Video</a>
              {% endif %}
              <a class="dropdown-item" href="/settings/api"><i class="fas fa-key"></i> API Keys</a>
              {% endif %}
              <a class="dropdown-item" href="/settings/user/subscriptions"><i class="fas fa-star"></i> Subscriptions</a>
              <a class="dropdown-item" href="/settings/user"><i class="fas fa-cogs"></i> Settings</a>
              <a class="dropdown-item" href="https://openstreamingplatform.com/support"><i class="fas fa-question-circle"></i> Help</a>
              <a class="dropdown-item" href="#" data-toggle="modal" data-target="#aboutModal"><i class="fas fa-info-circle"></i> About</a>
              <a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt"></i> Log Out</a>
            </div>
          </li>
        </ul>
        {% endif %}
      </div>
    </nav>
  </div>

  <div style="position: absolute; top: 65px; right: 70px;z-index:9999999;" id="toastDiv">
    {%- with messages = get_flashed_messages(with_categories=true) -%}
    {% if messages %}
    {% for category, message in messages %}
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="30000" style="width:250px;">
      <div class="toast-header">
        <strong class="mr-auto">
          <span class="toast-box {% if category == 'message' %}gray {% elif category == 'error'%}red {% elif category == 'success' %}green {% endif %}"> </span>
          <span style="margin-left:5px;">{{category|upper}}</span>
        </strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        {{message}}
      </div>
    </div>
    {% endfor %}
    {% endif %}
    {%- endwith %}
  </div>

  <!-- Modal -->
  <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="moveModalTitle">About OSP</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="text-center">
            <img src="/static/img/logo.png">
            <p class="pt-4">
              Open Streaming Platform Version <b>{{sysSettings.version}}</b>
            </p>
          </div>
          <div>
            <table>
              <tbody>
                <tr>
                  <td><i class="pr-2 fas fa-globe-europe"></i> Website</td>
                  <td><a href="https://openstreamingplatform.com">openstreamingplatform.com</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-gitlab"></i> Code repository</td>
                  <td><a href="https://gitlab.com/Deamos/flask-nginx-rtmp-manager/">Deamos/flask-nginx-rtmp-manager/</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-reddit"></i> Reddit</td>
                  <td><a href="https://reddit.com/r/openstreamingplatform">/r/openstreamingplatform</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-discord"></i> Discord</td>
                  <td><a href="https://discord.gg/Jp5rzbD">Open Streaming Platform</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="text-center">
            <p class="pt-4">
              <i class="fab fa-osi"></i><br>
              MIT License
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <form id="uploadform" action="/upload/video-details" enctype=multipart/form-data method="post">
          <div class="modal-header">
            <h5 class="modal-title" id="moveModalTitle">Upload a video</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="canceluploads()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="videoTitle">Title</label>
              <input class="form-control" id="videoTitle" name="videoTitle">
            </div>
            <div class="form-group">
              <label for="uploadToChannelID">Channel</label>
              <select name="uploadToChannelID" class="form-control">
                {% for chan in current_user.channels %}
                <option value="{{chan.id}}">{{chan.channelName}}</option>
                {% endfor %}
              </select>
            </div>

            <span>Thumbnail <span id="thumbnailuploadstatus"></span></span>
            <!-- hidden dropzone -->
            <div class="dropzone" id="thumbnaildropper" enctype="multipart/form-data"></div>
            <div class="form-group row">
              <div class="col-2 my-auto">
                <button id="thumbnailuploadbutton" type="button" class="btn btn-sm btn-primary">Browse</button>
              </div>
              <div class="col-10">
                <input class="form-control pl-2 form-control" id="thumbnailFilenameDisplay" name="thumbnailFilename" placeholder="Filename" disabled />
                <input type="hidden" class="form-control pl-2 form-control" id="thumbnailFilename" name="thumbnailFilename" placeholder="Filename" />
              </div>
            </div>

            <div class="progress progress-striped active mb-2" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div id="thumbnailuploadprogress" class="progress-bar progress-bar-success bg-success" style="color: white; width:0%;" data-dz-uploadprogress></div>
            </div>

            <span>Video file <span id="videouploadstatus"></span></span>
            <!-- hidden dropzone -->
            <div class="dropzone" id="videodropper" enctype="multipart/form-data"></div>
            <div class="form-group row">
              <div class="col-2 my-auto">
                <button id="videouploadbutton" type="button" class="btn btn-sm btn-primary">Browse</button>
              </div>
              <div class="col-10">
                <input class="form-control pl-2 form-control" id="videoFilenameDisplay" name="videoFilename" placeholder="Filename" disabled />
                <input type="hidden" class="form-control pl-2 form-control" id="videoFilename" name="videoFilename" placeholder="Filename" />
              </div>
            </div>

            <div class="progress progress-striped active mb-2" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div id="videouploadprogress" class="progress-bar progress-bar-success bg-success" style="color: white; width:0%;" data-dz-uploadprogress></div>
            </div>

            <div class="form-group">
              <label for="videoDescription">Video description</label>
              <textarea class="form-control" id="videoDescription" name="videoDescription" rows="3"></textarea>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="canceluploads()">Cancel</button>
            <button id="uploadbutton" type="submit" class="btn btn-success" disabled>Upload</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {% block body %}

  {% endblock %}

  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
  <script src="/static/vendor/popper/js/popper.min.js"></script>
  <script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/vendor/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
  <script src="/static/vendor/dropzone/js/dropzone.min.js"></script>
  <script src="/static/vendor/listjs/js/list.min.js"></script>
  <script type="text/javascript">
    Dropzone.autoDiscover = false;
  </script>
  {% block scripts %}

  {% endblock %}

  <script>
    var uploadmde = new EasyMDE({ element: document.getElementById("videoDescription") });
  </script>

  <script type="application/javascript">
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }

    videofilename = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();

    function videouploadsocket() {
      var conn_options = {
        'sync disconnect on unload': true
      };
      var socket = io();

      socket.on('disconnect', function () {
        socket.emit('cancelUpload', { data: videofilename });
      });
      window.addEventListener("beforeunload", function (e) {
        socket.emit('cancelUpload', { data: videofilename });
        return null;
      });
    }


    var thumbnaildropper = new Dropzone(
      '#thumbnaildropper', {
      acceptedFiles: 'image/png',
      previewTemplate: '<div></div>',
      clickable: '#thumbnailuploadbutton',
      addRemoveLinks: true,
      paramName: 'file',
      chunking: true,
      forceChunking: true,
      url: '/upload/video-files',
      maxFilesize: 5, // megabytes
      chunkSize: 1000000 // bytes
    }
    );
    thumbnaildropper.on('sending', function (file, xhr, formData) {
      formData.append('ospfilename', videofilename + '.png');
    });
    thumbnaildropper.on("uploadprogress", function (file, progress, bytesSent) {
      progress = Math.floor(bytesSent / file.size * 100);
      $('#thumbnailuploadprogress').width(progress + "%");
      document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = '<b>' + progress + '%</b>';
    });
    thumbnaildropper.on("addedfile", function (file) {
      document.getElementById('thumbnailFilename').value = videofilename + '.png';
      document.getElementById('thumbnailFilenameDisplay').value = file.name;
      videouploadsocket();

    });
    thumbnaildropper.on("success", function (file) {
      document.getElementById('thumbnailuploadstatus').innerHTML = document.getElementById('thumbnailuploadstatus').innerHTML = ' <i class="fas fa-check">';
      document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = 'Upload complete';

    });
    thumbnaildropper.on('error', function (file, response) {
      document.getElementById('thumbnailuploadstatus').innerHTML = document.getElementById('thumbnailuploadstatus').innerHTML = ' <i class="fas fa-exclamation-triangle"></i>';
      document.getElementById('thumbnailFilenameDisplay').value = 'Error: ' + response;
    });

    var videodropper = new Dropzone(
      '#videodropper', {
      acceptedFiles: 'video/mp4',
      createImageThumbnails: false,
      previewTemplate: '<div></div>',
      clickable: '#videouploadbutton',
      addRemoveLinks: true,
      paramName: 'file',
      chunking: true,
      forceChunking: true,
      url: '/upload/video-files',
      maxFilesize: 4096, // megabytes
      chunkSize: 1000000 // bytes
    }
    );
    videodropper.on('sending', function (file, xhr, formData) {
      formData.append('ospfilename', videofilename + '.mp4');
    });
    videodropper.on("uploadprogress", function (file, progress, bytesSent) {
      progress = Math.floor(bytesSent / file.size * 100);
      $('#videouploadprogress').width(progress + "%");
      document.getElementById('videouploadprogress').innerHTML = document.getElementById('videouploadprogress').innerHTML = '<b>' + progress + '%</b>';
    });
    videodropper.on("addedfile", function (file) {
      document.getElementById('videoFilename').value = videofilename + '.mp4';
      document.getElementById('videoFilenameDisplay').value = file.name;
      videouploadsocket();

    });
    videodropper.on("success", function (file) {
      $('#uploadbutton').removeAttr('disabled');
      document.getElementById('videouploadstatus').innerHTML = document.getElementById('videouploadstatus').innerHTML = '<i class="fas fa-check">';
      document.getElementById('videouploadprogress').innerHTML = document.getElementById('videouploadprogress').innerHTML = 'Upload complete';
    });
    videodropper.on('error', function (file, response) {
      document.getElementById('videouploadstatus').innerHTML = document.getElementById('videouploadstatus').innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
      document.getElementById('videoFilenameDisplay').value = 'Error: ' + response;
    });
  </script>
  <script>
    $(document).ready(function () {
      $('.toast').toast('show');
      document.getElementById("uploadform").reset();

    });
  </script>

  <script>
    var lazyLoadInstance = new LazyLoad({
      elements_selector: ".lazy"
    });
  </script>

  <script>
    function canceluploads() {
      videodropper.removeAllFiles(true);
      thumbnaildropper.removeAllFiles(true);
      document.getElementById("uploadform").reset();
      document.getElementById('videouploadstatus').innerHTML = "";
      document.getElementById('videouploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = "";
      document.getElementById('thumbnailuploadstatus').innerHTML = "";
      document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = "";
      $('#uploadbutton').attr('disabled');
      $('#thumbnailuploadprogress').width("0%");
      $('#videouploadprogress').width("0%");
    }
  </script>

  <script>
    $('.notificationDropdownMenu').click(function(e) {
      e.stopPropagation();
    });

    var notificationCountMobile = document.getElementById("notificationCountMobile");
    var notificationCountNav = document.getElementById("notificationCountNav");
    var notificationCountMenu = document.getElementById("notificationCountMenu");
    var notificationCount = {{notifications|count}};

    function clearNotification(notificationID) {
      var conn_options = {
        'sync disconnect on unload': true
      };
      var socket = io();

      var notification = document.getElementById('notification-' + notificationID);
      notification.parentNode.removeChild(notification);

      var newCount = notificationCount - 1;
      if (newCount <= 0) {
        var emptyNotificationBar = document.getElementById("notification-empty");

        notificationCountMobile.style.display = "none";
        notificationCountNav.style.display = "none";
        emptyNotificationBar.style.display = "block";
        newCount = 0;
      }

      notificationCountMobile.innerText = newCount;
      notificationCountNav.innerText = newCount;
      notificationCountMenu.innerText = newCount;
      notificationCount = notificationCount - 1;

      socket.emit('markNotificationAsRead', { data: notificationID });
    }

    function clearAllNotifications() {
      var ids = $('.notificationBody .notification-box').map(function(){
        return $(this).attr('id');
        }).get();
      ids.forEach(function (item, index) {
        if (item != 'notification-empty') {
          item = item.replace('notification-','');
          clearNotification(item);
        }
      });
    }

    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function hideDiv(divID) {
      $('#' + divID).removeClass("show");
      $('#' + divID).addClass("hide");
    }

    function createNewBSAlert(message,category) {
      var randomID = getRandomInt(1,9000);
      $('#toastDiv').append('<div class="toast fade show" id="toast-' + randomID + '" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="30000" style="width:250px;">' +
              '<div class="toast-header"><strong class="mr-auto"><span class="toast-box"> </span><span style="margin-left:5px;">' + category + '</span> </strong>' +
              '<button type="button" class="ml-2 mb-1 close" onclick="hideDiv(\'toast-' + randomID + '\')" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">' + message + '</div></div>')
    }

  </script>


</body>


</html>